<script setup>
import TodoHeaderVue from './components/TodoHeader.vue'
import TodoMainVue from './components/TodoMain.vue'
import TodoFooterVue from './components/TodoFooter.vue'
import { ref, watch } from 'vue'

// 提供数据
const list = ref([
  {
    id: 1,
    name: '吃饭',
    done: true,
  },
  {
    id: 2,
    name: '睡觉',
    done: true,
  },
  {
    id: 3,
    name: '敲代码',
    done: true,
  },
])

// 接受子组件传递过来修改的数据
const changeDone = (id) => {
  // console.log(id,'当前修改的id')
  const todo = list.value.find((item) => item.id === id)
  //  console.log(todo, '当前需要修改的数据')
  todo.done = !todo.done
}

// 删除
const delTodo = (id) => {
  // list.value.find(item => item.id === id)
  list.value = list.value.filter((item) => item.id !== id)
}

// 添加
const addTodo = (name) => {
  list.value.unshift({
    id: Date.now(),
    name: name,
    done: false,
  })
}

// input的全选和反选
const checkAll = (value) => {
  list.value.forEach((item) => (item.done = value))
}

const delAll = (value) => {
  list.value = list.value.filter((item) => item.done === value)
}

watch(
  list,
  (value) => {
    localStorage.setItem('todoList', JSON.stringify(value))
  },
  {
    immediate: true,
    deep: true,
  }
)
</script>

<template>
  <TodoHeaderVue
    :list="list"
    @addTodo="addTodo"
    @checkAll="checkAll"
  ></TodoHeaderVue>
  <TodoMainVue
    :list="list"
    @changeDone="changeDone"
    @delTodo="delTodo"
  ></TodoMainVue>
  <TodoFooterVue :list="list" @delAll="delAll"></TodoFooterVue>
</template>
